<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- vue 的容器 -->
    <div id ='app'></div>
    <script>
        // 开发起始控制
        Vue.config.productionTip = false;
        // 通过实例化vue得到一个VM对象，VM对象被称为vue 的实例
        const vm = new Vue({
            // el为配置项：提供一个在页面上已存在的dom元素作为vue实例化挂在目标
            // el:document.getElementById('app')  的简写
            el:'#app',
            // data配置项就是用来存放数据（基本数据类型，引用数据类型）
            data:{
                count:1,
            },
            // 模板：template配置项中的模板会直接替换vue容器元素
            template:`<h1>我是模板,count的值是{{count}}</h1>`
        })

        // $el:vue 实例使用的根元素
      //如果我们使用的是template配置项,则template配置项的模板会把#app容器直接替换,所以$el打印的是template配置项中的最外层容器
        console.log(vm.$el);


    </script>


</body>
</html>
